Bootstrap - Cores e Fundos

Cores de Letras Padrão - Pela CSS :

azul(blue)

indigo

púrpura(purple)

pink

vermelho(red)

laranja(orange)

amarelo(yellow)

verde(green)

teal

Padrão de Cores de Letras BootStrap ( Themes Colors )

Como usar :
<p class="text-primary">.text-cor</p> (pode ser uma div como neste página)

A classe define a cor do texto e a cor de fundo do box que pode ser :

classe	Cor caracteres	Cor de fundo
success	verde escuro	azul claro
info	azul escuro	azul claro
warning	marron claro	rosa claro
danger	vermelho	rosa claro
primary	azul	azul claro
secondary	preto	azul claro
dark	preto	azul claro
light	cinza claro	branco

Como é exibido :

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Cores de Fundo ( BackGround )

Como usar :
<div class="p-3 mb-2 bg-cor text-white">.bg-cor</div>

Como é exibido :

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

Cores de Fundo ( BackGround ) - Gradientes de Fundo

Utilize o gradiente de fundo do html. O do jQuery depende de plugins e recursos que nem sempre estão disponíveis ou foram instalados.

Nota : Este recurso ainda não funciona no bootstrap. Procurei em todos os sites e não encontrei um com gradiente de cores funcionando exceto pela CSS.

Como usar :
        <script>
            $enable - gradients;
        </script>

            <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>

Como é exibido :

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

Gradiente pela css-background image:

Como é declarado :
    <style>
        #grad {
            background-image: linear-gradient(red, yellow, blue);
        }
    </style>

<div id="grad" style="height:200px;width:200px;"></div>

Como é exibido :